<template>
    <div class='hosptial-page'>
        <el-card class="left">
            <h2>住院详情</h2>
            <ul>
                <li v-for="item in data" :key="item.id" @click="getCurrentData(item)"
                    :class="{ on: item.id === currentData.id }">
                    <span>{{ item.recordDate }}-{{ item.yljgmc }}</span>
                </li>
            </ul>
        </el-card>
        <el-card class="right">
            <span v-if="!currentData.id">
                暂无数据
            </span>
            <el-card class="top" v-if="currentData.id">
                <div>
                    <span>流水号:</span>
                    <el-tag>{{ currentData.lsh }}</el-tag>
                </div>
                <div>
                    <span>检查时间:</span>
                    <el-tag>{{ currentData.recordDate }}</el-tag>
                </div>
                <div>
                    <span>医疗机构名称:</span>
                    <el-tag>{{ currentData.yljgmc }}</el-tag>
                </div>
            </el-card>
            <el-card class="bottom" v-if="currentData.id">
                <el-scrollbar class="scroll-container" style=" height: calc(90vh - 100px);">
                    <el-collapse>
                        <el-collapse-item :title="item.pageName" :name="item.id" v-for="item in currentList"
                            :key="item.id">
                            <!-- 费用列表 -->
                            <el-table :data="item.lists" style="width: 100%;" border v-if="item.pageName === '费用'">
                                <el-table-column prop="name" label="项目名称" width="180">
                                </el-table-column>
                                <el-table-column prop="price" label="单价" width="180">
                                </el-table-column>
                                <el-table-column prop="sunPrice" label="金额">
                                    <template slot-scope="scope">
                                        {{ scope.row.price * scope.row.count }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="count" label="数量">
                                </el-table-column>
                                <el-table-column prop="unit" label="单位">
                                </el-table-column>
                                <el-table-column prop="type" label="费用类别">
                                    <template slot-scope="scope">
                                        {{ typeList[scope.row.type] }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="time" label="日期">
                                </el-table-column>
                            </el-table>
                            <!-- 医嘱列表  -->
                            <el-table :data="item.lists" style="width: 100%;" border v-if="item.pageName === '医嘱'">
                                <el-table-column prop="exeTime" label="起始时间" width="180">
                                </el-table-column>
                                <el-table-column prop="doctorEnjoin" label="医嘱" width="180">
                                </el-table-column>
                                <el-table-column prop="doctorName" label="医生签名">
                                </el-table-column>
                                <el-table-column prop="nurseName" label="护士签名">
                                </el-table-column>
                                <el-table-column prop="startTime" label="执行时间">
                                </el-table-column>
                                <el-table-column prop="endTime" label="停止时间">
                                </el-table-column>
                            </el-table>
                            <!--  检查报告1-->
                            <div v-if="item.pageName == '检验报告'"
                                style="display:flex;justify-content: space-around;margin:20px 0">
                                <div>
                                    <span>检查医生:</span>
                                    <el-tag type="success">{{ item.checkName }}</el-tag>
                                </div>
                                <div>
                                    <span>审核医生:</span>
                                    <el-tag type="success">{{ item.auditName }}</el-tag>
                                </div>
                                <div>
                                    <span>检查时间:</span>
                                    <el-tag type="success">{{ item.checkDate }}</el-tag>
                                </div>
                            </div>
                            <el-table :data="item.lists" style="width: 100%;max-height:500px" height="300" border
                                v-if="item.pageName === '检验报告'">
                                <el-table-column prop="projectName" label="项目名称" width="180">
                                </el-table-column>
                                <el-table-column prop="projectNameEn" label="项目英文名" width="180">
                                </el-table-column>
                                <el-table-column prop="result" label="结果">
                                </el-table-column>
                                <el-table-column prop="unit" label="单位">
                                </el-table-column>
                                <el-table-column prop="normal" label="参考范围">
                                </el-table-column>
                            </el-table>
                            <!--  检查报告2-->
                            <el-table :data="item.lists" style="width: 100%;" border height="300"
                                v-if="item.pageName === '检查报告'">
                                <el-table-column prop="checkNameCH" label="项目名称" width="180">
                                </el-table-column>
                                <el-table-column prop="checkNameEN" label="项目英文名" width="180">
                                </el-table-column>
                                <el-table-column prop="result" label="结果">
                                    <template slot-scope="scope">
                                        {{ scope.row.result === "0" ? "阳性(+)" : "阴性(-)" }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                    </el-collapse>
                </el-scrollbar>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import { healthAPI } from '@/http'
export default {
    name: 'hosptial-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'hosptial-page',
            data: [],
            currentData: {},
            currentList: [],
            typeList: ['药品', '挂号', '检查', '体检', '手术', '住院'],
        }
    },
    created() {
        this.getData()
    },
    computed: {
        sunPrice() {
            console.log('asads', this);
            return 0
        }
    },
    methods: {
        getData() {
            healthAPI.getMenuListAPI().then(res => {
                // console.log('数据：', res);
                if (res.code === 200) {
                    if (this.data.length === 0) {
                        this.data = res.data
                    }
                    console.log('住院信息', this.data);
                }
            })
        },
        getCurrentData(obj) {
            this.currentData = obj
            this.getDetail(this.currentData.id)
        },
        getDetail(id) {
            healthAPI.getDetailAPI(id).then(res => {
                // if (this.currentList.length === 0) {
                this.currentList = res.data
                // }
                console.log('具体住院信息', res);
            })
        }
    }
}
</script>

<style scoped lang="less">
.hosptial-page {
    display: flex;
    height: 100vh;

    & .left {
        width: 300px;

        /deep/ .el-card__body {
            padding: 0;
        }

        h2 {
            color: #909399;
            font-family: "黑体";
            font-size: 20px;
            padding: 20px;
        }

        li {
            width: 100%;
            margin: 10px 0;
            padding: 20px;
            font-size: 14px;

            &:hover {
                background-color: #ECF5FF;
            }

            &.on {
                color: var(--m-c);
                background-color: #ECF5FF;
            }
        }

    }

    & .right {
        flex: 1;
        text-align: center;

        & .el-card__body>span {
            width: 100%;
            font-size: 100px;
            line-height: 100vh;
            color: #eee;
        }

        & .top {
            /deep/ .el-card__body {
                display: flex;
                justify-content: space-around;
            }
        }

        & .bottom {
            margin-top: 20px;
        }
    }
}
</style>